import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import { useEffect } from 'react';
import { Route, Routes } from 'react-router-dom';

import Nav from '@/components/layout/Nav';
import TitleBar from '@/components/layout/TitleBar/index';
import Format from '@/pages/format';
import Home from '@/pages/home';
import Setting from '@/pages/setting';
import MyVideo from '@/pages/video';
import store from '@/store';

import styles from './index.less';
dayjs.extend(duration);
const Index = () => {
  useEffect(() => {
    store.getScreenList();
  }, []);

  return (
    <div className={styles.app}>
      <TitleBar />
      <div className={styles.main} id="app-main">
        <Nav />
        <Routes>
          <Route path="home" element={<Home />} />
          <Route path="video" element={<MyVideo />} />
          <Route path="format" element={<Format />} />
          <Route path="setting" element={<Setting />} />
        </Routes>
      </div>
    </div>
  );
};
export default Index;
